<template>
    <div class="app-container">
          <el-form :model="queryParams" ref="query" :inline="true"  label-width="88px">
            <el-form-item label="园所名称：" prop="schoolName">
              <el-select v-model="queryParams.schoolCode"  clearable 
                  @clear="getClear"
                  filterable placeholder="请选择园所名称">
                          <el-option
                            v-for="item in schoolList"
                            :key="item.code"
                            :label="item.title"
                            :value="item.code">
                          </el-option>
                        </el-select>
         </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item> 
      </el-form>
          <div  style="text-align: right;margin:0  5px 10px 0;">
            <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
          </div>
          <el-table v-loading="loading" :data="eyesightList"  style="height: 100%;width: 100%;">
            <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
              <el-table-column  align="center" label="园所名称"  prop="schoolName"></el-table-column>
              <el-table-column  align="center" label="总人数"  prop="stuTotal"></el-table-column>
              <el-table-column  align="center" label="达标人数" prop="complianceNum"></el-table-column>
              <el-table-column  align="center" label="不良人数" prop="poorNum"></el-table-column>
              <el-table-column  align="center" label="达标率/%" prop="compliancePro"></el-table-column>
           </el-table>
           <div style="height: 50px;">
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                   @pagination="getList" />
          </div>
    </div>
  </template>
  
  <script>
   import { eyesightschool,exportEyesight } from "@/api/qu/qyyeslzx";
   import {schoolList} from "@/api/qu/qyyerygk";
    export default {
      name: "StudentCheck",
      data() {
        return {
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            schoolCode:'',
          },
          schoolList:[],
          eyesightList:[],
          total:0,
        };
      },
      created() {
        this.getschoolList()
        this.getList();
      },
      methods: {
          //获取学校列表
        async getschoolList(){
           const data = await schoolList();
           this.schoolList=data.rows;
        },
       async getList(){
            try {
              this.loading = true;
              const obj={
                schoolCode:this.queryParams.schoolCode,
                pageNum: this.queryParams.pageNum,
                pageSize:this.queryParams.pageSize,
              };
             const data =  await eyesightschool(obj);
             this.eyesightList= data.rows;
             this.total=data.total;
             this.loading = false;
            } catch (error) {
              console.log(error);
            }
        },
        getClear(){
          this.getList();
       },
           /** 搜索按钮操作 */
        handleQuery() {
          this.getList();
        },
         /** 重置按钮操作 */
         resetQuery() {
          this.queryParams.schoolCode=''
          this.handleQuery();
        },
              // 序号
       customeIndex(index){
         return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
      },
        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$confirm('是否确认导出数据?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              return exportEyesight(queryParams);
            }).then(response => {
              this.download(response.msg);
            })
        },
      }
    };
  </script>
  <style lang="scss" scoped>
  </style>
  